<template>
<Loading :loading="loading">
  <div>
    <NavBar v-if="navShow" :textTitle="custitle" :titleFlag="cusFlag"></NavBar>
    <!-- <van-overlay :show="overShow" @click="overShow=false">
      <div class="wrapper">
        <div class="block" >
          <van-loading size="30px"></van-loading>
        </div>
    </div>
    </van-overlay> -->
    <div class="c-1gy50t">
      <div
        class="c-1gy50t-header flex-row flex-justify-center flex-align-center"
      >
        <img src="./img/left3.png" class="c-t8qnd7" />
      </div>
      <div class="c-1gy50t-line"></div>
      <div class="c-1gy50t-tip">温馨提示，您即将进入投保流程：</div>
      <div class="c-1gy50t-tip-desc">
        请仔细阅读保险条款、投保须知等内容，为保障您的权益，您在销售页面的操作将会被记录并加密存储。
      </div>
      <h3 class="c-1gy50t-tip-book">客户告知书</h3>
      <article class="c-1gy50t-tip-book-txt">
        <h4>
          <span>尊敬的客户：</span>
          <br />
          <div class="top-cnt">
            感谢您委托我公司代为办理保险业务。本公司是基于投保人的利益，为投保人与保险公司订立保险合同提供中介服务的保险专业中介机构。为了保护您的合法权益，按照《保险经纪机构监管规定》的要求，本公司应履行客户告知义务，现将有关事项告知如下，请仔细阅读。
          </div>
        </h4>
        <section class="main">
          <ol>
            <li>
              一、产品名称：
              <span class="product-name bold">
                {{ obj.productName }}
              </span>
            </li>
            <li>
              二、保险公司：
              <span class="insurer-name bold">{{ obj.partnerName }}</span>
            </li>
            <li>三、销售机构：上海万利保险经纪有限公司</li>
            <li>
              四、销售机构基本情况
              <ol>
                <li>（一）名称：上海万利保险经纪有限公司</li>
                <li>（二）地址：上海市浦东新区崂山路528号江苏大厦18楼</li>
                <li>
                  （三）许可证名称及编号：经营保险经纪业务许可证编号260382000000800
                </li>
                <li>
                  （四）业务范围：在全国区域内（港、澳、台除外）为投保人拟订投保方案、选择保险人、办理投保手续；协助被保险人或受益人进行索赔；再保险经纪业务；为委托人提供防灾、防损或风险评估、风险管理咨询服务；中国保监会批准的其他业务。
                </li>
                <li>（五）经营区域：全国（港、澳、台除外）</li>
                <li>（六）联系方式：021-68391209</li>
              </ol>
            </li>
            <li>
              五、请仔细阅读保险条款，重点关注保险责任、责任免除、被保险人权利义务、免赔额或免赔率的计算、健康保险产品等待期等内容，并可要求本公司业务人员对上述内容进行详细讲解。
            </li>
            <li>
              六、请向本公司客服人员了解《中华人民共和国保险法》等法律法规对于索赔时效、保险公司理赔时限、合同中止与失效、未成年人投保限额等的相关规定，以及不履行如实告知义务、故意制造保险事故或夸大事故损失、申报年龄不真实等情形导致的法律后果。
            </li>
            <li>
              七、本公司承诺将通过有效的技术手段和管理措施对投保人（被保险人或都受益人）的个人信息、投保交易信息等非公开信息进行保密，严格限制保密信息的接触人，妥善保管保密信息；并在与保险公司的数据交换过程中采用了加密与验证保证交易安全。
            </li>
            <li>
              八、如果您发现本公司客服人员存在误导行为及其他损害您合法权益的行为，可向本公司投诉，投诉电话021-68391209。
            </li>
          </ol>
        </section>
      </article>
    </div>
    <div class="c-1gy50t-btn" @click="handleMenu">我知道了</div>
  </div>
</Loading> 
</template>
<script>
import NavBar from '@/components/h5header'
// import isHiddenNavigationBar from '@/services/h5/app-api/isHiddenNavigationBar.js'
import { isApp } from '@/utils/platform'
import { mapState, mapMutations } from 'vuex'
import API from '@/services/h5/common'
import Loading from '@/components/data-loading'
export default {
  components: { NavBar, Loading },
  data() {
    return {
      show: false,
      isLoading:false,
      title:undefined,
      custitle: undefined,
      cusFlag: true,
      overShow: false,
      navShow:true,
      getStyle:undefined,
      obj: {
        productName: '',
        partnerName: '',
        productUrl: '',
        msg: null
      },
      userId: this.$route.query.userId
    }
  },
  computed: {
    ...mapState('loading', ['loading'])
  },
  created() {
    // APP 状态下，客户告知书隐藏原生头部
    // isApp &&
    //   isHiddenNavigationBar({
    //     isHiddenBar: '1'
    //   })
    if(isApp) {
      this.navShow = false
    }
  },
  mounted() {
    this.obj = {
      productName: '',
      partnerName: '',
      productUrl: '',
      msg: '',
    }
    this.init()
  },
  methods: {
    ...mapMutations('loading', ['setLoading']),
    init() {
      this.custitle = this.$route.query.productName
      this.obj.productName = ''
      this.obj.partnerName = ''
      this.obj.productUrl = ''
      let params = {
        productId: this.$route.query.productId,
        userId:this.$route.query.userId
      }
      API.getonlineProduct(params)
        .then(res => {
          if (res.data && res.data.code === 1000) {
            this.obj = res.data.data
            this.msg = null
          }
        })
        .catch(err => {
          if (err.data && err.data.code === 2008) {
            this.obj = err.data.data
            this.msg = err.data.msg
          }
        })
    },
    async handleMenu() {
      this.setLoading(true)
      setTimeout(() => {
        this.setLoading(false)
      }, 1000)
      if (this.msg) {
        this.$message.error(this.msg)
        
      } else {
        // this.$router.push({
        //   path: '/productOnline',
        //   query: {
        //     productId: this.$route.query.productId,
        //     productUrl: this.obj.productUrl,
        //     productAbbrDescription: this.obj.productAbbrDescription,
        //     productName: this.obj.productName,
        //     logoUrl: this.obj.logoUrl
        //   }
        // })

        // window.location.replace(this.obj.productUrl)
        // this.isLoading = true
        this.overShow = true
        window.location.href = this.obj.productUrl
        // this.overShow = false
      }
      this.show = false
    },
  }
}
</script>
<style lang="less" scoped>
.top-cnt {
  text-indent: 2em;
}
.bold {
  font-weight: bold;
}
.c-1gy50t {
  position: relative;
  padding: 13px 15px 65px 15px;
  &-header {
    text-align: center;
  }
  &-header-line {
    width: 1px;
    height: 14px;
    margin: 0 20px;
    background: #ccc;
  }
  &-header-desc {
    margin-top: 5px;
    text-align: center;
    font-size: 12px;
    color: #666;
  }
  &-line {
    height: 0.5px;
    background: #e9e9e9;
    margin: 15px 0;
  }
  &-tip {
    font-size: 17px;
    font-weight: bold;
    color: #333;
  }
  &-tip-desc {
    font-size: 15px;
    color: #666;
    margin-top: 10px;
  }
  &-tip-book {
    display: flex;
    justify-content: center;
    font-size: 16px;
    &-txt {
      font-size: 14px;
    }
  }
  &-btn {
    position: fixed;
    bottom: 0;
    width: 375px;
    margin-top: 25px;
    height: 50px;
    border-radius: 4.5px;
    background: @c-color-primary;
    text-align: center;
    line-height: 50px;
    font-size: 17px;
    font-weight: bold;
    color: #fff;
  }
}
.c-t8qnd7 {
  width: 46px;
  height: 21px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
/deep/ .van-loading {
  top: 50%;
  transform: translateY(-50%);
}
/deep/ .van-overlay {
  background-color: rgba(251, 255, 255, 0.9);
}
</style>
